<template>
  <view
    class="hb-bg-white hb-rounded-lg hb-p-3 hb-relative hb-box-shadow-base"
    @click="handleClick"
  >
    <!-- 右上角角标 -->
    <view
      class="hb-absolute hb-top-0 hb-right-0 hb-translate-x-0 hb-translate-y-0 hb-overflow-hidden"
      style="border-radius: 0 8rpx 0 8rpx"
    >
      <RoleTag
        v-if="connectionInfo.type === CardTypeEnum.AGENT"
        text="智能体"
        type="member"
        icon="icon-ai"
      />
      <RoleTag v-else :text="connectionInfo.levelName" type="superAdmin" icon="icon-huangguan" />
    </view>

    <!-- 用户头像和基本信息 -->
    <view class="hb-flex hb-items-start hb-gap-3 hb-mb-3 hb-py-2">
      <!-- 头像 -->
      <view class="hb-relative">
        <TImage
          :src="
            connectionInfo.type === CardTypeEnum.FIND_PERSON
              ? connectionInfo.avatar
              : connectionInfo.logo || ''
          "
          width="80rpx"
          height="80rpx"
          borderRadius="8rpx"
          :errorImgType="connectionInfo.type === CardTypeEnum.FIND_COMPANY ? 'unit' : 'person'"
        />
      </view>

      <!-- 用户信息 -->
      <view class="hb-flex-1">
        <!-- 用户名称/单位名称 -->
        <view class="hb-flex hb-items-center hb-mb-1">
          <text class="hb-text-sm hb-font-bold hb-text-[#333333]">
            {{
              {
                [CardTypeEnum.FIND_PERSON]: connectionInfo.username,
                [CardTypeEnum.FIND_COMPANY]: connectionInfo.companyName,
                [CardTypeEnum.AGENT]: connectionInfo.botName,
              }[connectionInfo.type]
            }}
          </text>
        </view>

        <!-- 公司·职位信息/用户名·职位信息 -->
        <view class="hb-mb-2">
          <text class="hb-text-xs hb-text-[#646566]">
            {{
              {
                [CardTypeEnum.FIND_PERSON]: connectionInfo.companyName,
                [CardTypeEnum.FIND_COMPANY]: connectionInfo.username,
                [CardTypeEnum.AGENT]: connectionInfo.companyName,
              }[connectionInfo.type]
            }}
          </text>
          ·
          <text class="hb-text-xs hb-text-[#646566]">
            {{ connectionInfo.companyPositionName }}
          </text>
        </view>

        <!-- 标签行 -->
        <view class="hb-flex hb-flex-wrap hb-gap-2 hb-items-center">
          <!-- 认证标签 -->
          <RoleTag
            v-if="connectionInfo.type === CardTypeEnum.AGENT"
            icon="icon-yonghu"
            :text="connectionInfo.botCertificationType"
            type="member"
          />
          <!-- 等级 -->
          <RoleTag
            v-if="connectionInfo.type === CardTypeEnum.FIND_PERSON"
            :text="connectionInfo.memberRoleName"
            type="member"
          />
          <!-- 好友标签 -->
          <!-- <RoleTag v-if="connectionInfo.type === CardTypeEnum.AGENT" text="好友" type="member" /> -->
          <!-- 圈子信息 -->
          <!-- <RoleTag
            v-if="connectionInfo.type === CardTypeEnum.AGENT"
            text="圈子：深圳市梅县商会"
            type="member"
          /> -->
        </view>
      </view>
    </view>

    <view class="hb-flex hb-items-center hb-gap-2 hb-mt-3 hb-border-t hb-border-[#f5f5f5] hb-pt-3">
      <view
        class="hb-bg-[#E29942] hb-p-1 hb-rounded-full hb-h-4 hb-w-4 hb-flex hb-items-center hb-justify-center"
      >
        <text class="ali-icon icon-dianzan hb-text-white hb-text-[16rpx]"></text>
      </view>
      <view class="hb-flex-1">
        <text class="hb-text-xs hb-text-[#646566] hb-break-all">
          {{ connectionInfo.analyDesc }}
        </text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import TImage from '@/components/TImage/index.vue';
  import tmIcon from '@/tmui/components/tm-icon/tm-icon.vue';
  import RoleTag from '@/components/RoleTag/index.vue';
  import { ConnectionInfo } from '@/api/aiChatPage/types';
  import { CardTypeEnum } from '@/enums/MessageEnum';
  // 组件属性
  const props = defineProps({
    connectionInfo: {
      type: Object as PropType<ConnectionInfo>,
      default: () => ({}),
    },
  });

  // 点击事件
  const handleClick = () => {
    if (props.connectionInfo.type === CardTypeEnum.AGENT) {
      navigateTo({
        name: 'cardDetail',
        options: {
          uuid: props.connectionInfo.botUUID,
        },
      });
    }
  };
</script>

<style lang="scss" scoped></style>
